/**
 * @File   : index.tsx
 * @Author : xue.xiaoBing
 * @Date   : 2024/3/22 19:22
 * @Desc   : 自定义底部导航栏
 * */


import {useRef, useState} from 'react';
import Taro from '@tarojs/taro';
import classNames from 'classnames';
import {Tabbar} from '@nutui/nutui-react-taro';
import '@nutui/nutui-react-taro/dist/style.css';
import {Category, Home, User} from "@nutui/icons-react-taro";

import './index.scss'

const TABS_INFO = [
  {
    path: '/pages/index/index',
    iconName: 'home',
    selectedIconName: 'home-fill',
    title: '首页',
  },
  {
    path: '/pages/func/index',
    iconName: 'category ',
    selectedIconName: 'category-fill',
    title: '功能',
  },
  {
    path: '/pages/user/index',
    iconName: 'user',
    selectedIconName: 'user-fill',
    title: '我的',
  },
];

const CustomTabBar = () => {
  const currentRef = useRef(0);
  const [_, setCurrent] = useState(0);

  const handleClick = (index) => {
    console.log('--------xxxx', index, TABS_INFO[index].path)
    setCurrent(index);
    currentRef.current = index;
    Taro.switchTab({url: TABS_INFO[index].path});
  };

  return (
    <div className='bottom-bar'>
      <Tabbar fixed value={currentRef.current} className='tab-bar-box'>
        <Tabbar.Item
          className={classNames('bar-item', {'bar-item-active': currentRef.current === 0})}
          icon={<Home size={18} />}
          onClick={() => handleClick(0)}
        />
        <Tabbar.Item
          className={classNames('bar-item', {'bar-item-active': currentRef.current === 1})}
          icon={<Category size={18} />}
          onClick={() => handleClick(1)}
        />
        <Tabbar.Item
          className={classNames('bar-item', {'bar-item-active': currentRef.current === 2})}
          icon={<User size={18} />}
          onClick={() => handleClick(2)}
        />
      </Tabbar>
    </div>
  )
};

export default CustomTabBar;
